<template>
  <div id="settings">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <van-cell-group style="margin-top:3rem;">
      <van-cell title="个人信息" is-link value="头像、昵称" />
      <van-cell title="账号与安全" is-link  value="修改账号、手机号、账号绑定" />
    </van-cell-group>
    <van-cell-group style="margin-top:0.2rem;">
      <van-cell title="支付设置" is-link />
      <van-cell title="消息通知设置" is-link />
      <van-cell title="通用" is-link   />
      <van-cell title="诊断工具" is-link  />
    </van-cell-group>
    <van-cell-group style="margin-top:0.2rem;">
      <van-cell title="关于影院系统" is-link />
    </van-cell-group>
    <van-button @click="show = true" color="linear-gradient(to right, #ff6034, #ee0a24)" round text="退出账号" size="large" class="logout"/>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
      <h3 style="text-align: center;">确定退出账号？</h3><br>
      <div style="display:inline-block;text-align:center;width:100%;height:60px;">
        <van-button type="info" text="取消" @click="show = false"/>
        <van-button style="margin-left:20px;" @click="logout" type="default" text="确定"/>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
       show: false,
    }
  },
  methods: {
    onClickLeft() {
      // 返回上一个页面
      this.$router.go(-1);
    },
    logout() {
      // 删除token信息
      // 同步调用删除用户在vux中的信息
      this.$store.commit('updateUser', undefined);
      this.$store.commit('updateToken', undefined);
      this.$notify({
        message:'已退出登录！！',
        type:'success'
      })
      // 跳转登录页面
      this.$router.push("/login")
    }
  },
};
</script>

<style lang="less">
#settings {
  .logout {
    position: absolute;
    bottom: 3rem;
  }
}
</style>